<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/my-collection-list.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我收藏的</h1>
		</header>
		<div class="mui-content" id="collection_list">
			<div class="goods" v-for="goods in list">
				<img :src="userface_path+goods.userface" class="userface">
				<div class="user-info">
					<div class="nickname">{{goods.nick_name}}</div>
					<div class="createTime">{{goods.createTimeText}}</div>
				</div>
				<div class="price">&yen;20</div>
				<div @click="open_detail(goods.id)" :class="{ 'imgBox2': goods.pictureArray.length==1, 'imgBox': goods.pictureArray.length>1}">
					<img :src="goods_img_path+goods.pictureArray[0]" />
					<img v-if="goods.pictureArray.length>1" :src="goods_img_path+goods.pictureArray[1]" />
					<p>{{goods.des | intercept}}</p>
				</div>
				<div style="">
					<span class="campus">{{goods.campus}}</span>
					<!--<span style="float: right;">-->
					<span class="collection" @click="cancelCollectionGoods(goods.id)">
							<i class="mui-icon mui-icon-starhalf" style="color: orange;font-size: 14px;"></i>
							取消收藏</span>
					<!--</span>-->
				</div>
			</div>
		</div>

		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
		<script type="text/javascript" src="../js/const.js" ></script>
		<script type="text/javascript" src="../js/request.js" ></script>
		<script type="text/javascript" src="../js/goods_service.js" ></script>
		<script type="text/javascript">
			
			Vue.filter("intercept",function(value){
				return value.substring(0,15);
			})
			
			
			//vue对象
			var collection_list = new Vue({
				el: '#collection_list',
				data: {
					list: [],
					goods_img_path: GOODS_IMG_PATH + '/',
					userface_path: USER_FACE_PATH + '/'
				},
				methods: {
					//打开详情页面
					open_detail: function(id) {
						//触发详情页面的自定义事件
						mui.fire(detailPage, 'goodsId', {
							id: id
						});
						detailPage.show('slide-in-right');
					},
					cancelCollectionGoods: function(id) { //取消收藏
							var res = goodsService.cancelCollectionGoods(id);
							plus.nativeUI.toast(res.msg);
							if(res.resultCode ==REQUEST_SUCCESS_CDOE){
								var resPone = goodsService.get_collection_list();//刷新数据
								collection_list.list = resPone.data;
							}
							
							
						}
				}

			});
			
			mui.init();
				mui.plusReady(function() {
					
					detailPage = plus.webview.getWebviewById('goods-detail');
					if(!detailPage) {
						detailPage = mui.preload({
							id: 'goods-detail',
							url: 'goods_detail.html'
						});
					}
					
				var res = goodsService.get_collection_list();
				collection_list.list = res.data;
				console.log(JSON.stringify(collection_list.list ));

			});
		</script>
	</body>

</html>